<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<ul class = "list">
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
</ul>
<span class = "btn">
    清除缓存
</span>
<script>
    /*
    * 循环绑定问题
    *
    *
    *
    * */
    // 最基本的形状
    //ES5 解决全局变量i循环绑定指向不正确的问题

    var liList = document.querySelectorAll(".list li")

    //方案一：

    //循环之前 初始化循环长度 将length放在for循环的A声明部分就只需要执行一次
    for(var i = 0,length = liList.length;i < length;i++){ //for循环存在一个简化方法 访问属性会消耗属性 所以将liList.length赋值给length
        //现在需要让每一个函数里面都有各自独立的i：可以用闭包的知识并且简化改下代码
        //liList[i].onclick = function (){
        //    liList[i].innerHTML += "点击"
        //}
        //用立执行函数表达式：()() 前一个括号中的函数立马执行 返回一个值 此时liList[i].onclick就相当于一个等待执行的函数 等待被点击
        liList[i].onclick = (function (j){ //立执行函数中用形参j来接收实参i传入的值 虽然形参和实参长的不一样 但他们本质上是同一个值
            console.log(j)
            var dianJiCiShu = 0
            //用onclick接收立执行函数return出来的值 这个值其实就是下面这个函数
            return function (){ //这个函数访问作用域的时候 会访问外面那个立执行函数的作用域 没有的话再去最外面寻找 外面的是立执行函数 就算没点击也会立马执行 创建作用域
                dianJiCiShu++
                liList[j].innerHTML = "文字" + dianJiCiShu //里面这个函数执行时所点击的j 就是获取外面立执行函数执行时创建的j的值
            }
        })(i) //传入一个立执行函数的实参i 为什么是传入i 因为这个i是循环创建出来的每一个被点击的文字的下标

    }

    let btn = document.querySelector(".btn")

    btn.onclick  = function(){ //如何清除缓存
        for(var i = 0,length = liList.length;i < length;i++){
            liList[i].onclick = null
            //让访问闭包的那个函数没有办法执行了，作用域就释放掉了
        }
        alert("缓存清除成功")
    }

    /*
    //方案二：

    for(var i = 0,length = liList.length;i < length;i++){
        (function (j){
            let dianJiCiShu = 0
            liList[j].onclick = function (){ //因为这里直接将里面这个函数的返回值绑定给了点击事件 所以不需要像上面一样将这个函数作为返回值return给点击事件
                dianJiCiShu++
                liList[j].innerHTML = "文字" + dianJiCiShu
            }
        })(i)
    }
    */

    /*
    *
    * 方案三：
    * var liList = document.querySelectorAll(".liList li")
    * function foo1(){
    *   var a = liList[i].innerHTML
    *   function foo2(){
    *       console.log(a)
    *   }
    *   return foo2
    * }
    *
    * for(var i = 0,length = liList.length;i < length; i++){
    *   li[i].onclick = foo1()
    * }
    *
    * */







</script>
</body>
</html>